<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 路由</title>
    <script src="./vue.min.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--        //路由视图， 组件渲染入口-->
        <router-view></router-view>
<!--        路由跳转方式 == a标签-->

    </div>

    <script>
        // 1，定义组件
        const  pages = {template:`<div> <router-view></router-view>
 <div style="display: flex;justify-content: space-between">
            <router-link to="/home">首页  </router-link>
            <router-link to="/bar">商城  </router-link>
            <router-link to="/shequ">社区  </router-link>
        </div>
</div>`}

        const  home= {template: '<div>首页</div>'} //解析参数
        const  bar= {template: '<div> 首歌曲 </div>'} //解析参数
        const  shequ= {template: '<h3>社区</h3>'}

        const  pay= {template: '<h3>支付</h3>'}
        const  goods= {template: '<h3>商品</h3>'}

        // 2，定义路由 -声明动态路由，
        const routes = [
            { path: '/', component: pages,
                children:[
                    {path: 'home', component: home},
                    {path: 'bar', component: bar},
                    {path: 'shequ', component: shequ}]
            },
            { path: '/goods', component: goods },
            { path: '/pay', component: pay }
        ]

        // 3 创建路由实例
        const router= new VueRouter({
            routes
        })

        // 4挂载路由
        const app = new Vue({
            el:'#app',
            router,
            data:{
                msg:1111,
            }
        })

    </script>
</body>
</html>